@import '../../style/theme.scss';

.header {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 110rpx;
  .search {
    width: 174rpx;
    height: 58rpx;
    background-color: #f5f5f5;
    border-radius: 29rpx;
    padding: 0 26rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #d1d1d1;
  }
}

.store-map {
  width: 100%;
  transition: all 0.5s;
  position: relative;
  .current-icon {
    width: 44rpx;
    height: 44rpx;
    position: absolute;
    right: 18rpx;
    bottom: 22rpx;
  }
}

.collapse-area {
  width: 100%;
  height: 70rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20rpx;
  color: $gray-text-color;
  .icon {
    width: 30rpx;
    height: 30rpx;
    margin-left: 10rpx;
  }
}

.store-list {
  width: 100%;
  box-sizing: border-box;
  background-color: #f8f8f8;
  transition: all 0.5s;
  .empty {
    margin-top: 30rpx;
    font-size: 20rpx;
    color: $gray-text-color;
    text-align: center;
  }
  .store-box {
    background-color: #ffffff;
    padding: 25rpx;
    margin: 14rpx 25rpx;
    display: flex;
    align-items: center;
    .info-area {
      flex: 1;
      border-right: 1rpx solid #eeeeee;
      .name {
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 12rpx;
      }
      .info {
        font-size: 18rpx;
        color: $gray-text-color;
        margin-bottom: 12rpx;
      }
      .tag {
        display: inline-block;
        background-color: $primary-color;
        font-size: 18rpx;
        color: #fff;
        padding: 6rpx;
      }
    }
    .location-area {
      height: 100%;
      margin-left: 25rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      .distance {
        font-size: 20rpx;
        color: $gray-text-color;
        margin-bottom: 35rpx;
      }
      .action-area {
        width: 112rpx;
        display: flex;
        justify-content: space-around;
        image {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}

.store-detail {
  .notification {
    width: 100%;
    height: 86rpx;
    display: flex;
    align-items: center;
    background-color: #fcf0f4;
    padding: 0 30rpx;
    .icon {
      width: 38rpx;
      height: 38rpx;
      margin-right: 14rpx;
    }
    .info {
      font-size: 20rpx;
      color: $primary-color;
    }
  }
  .container {
    padding: 0 30rpx;
    .header-area {
      margin: 25rpx 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info {
        .title {
          font-size: 26rpx;
          font-weight: bold;
          line-height: 26rpx;
          margin-bottom: 14rpx;
        }
        .address {
          font-size: 20rpx;
          line-height: 20rpx;
          color: $gray-text-color;
        }
      }
      .distance {
        display: flex;
        font-size: 20rpx;
        color: $gray-text-color;
      }
    }

    .store-detail-map {
      width: 100%;
      height: 392rpx;
      margin: 25rpx 0;
    }

    .menu-btn {
      width: 100%;
  height: 85rpx;
  background-color: $primary-color;
  color: white;
  border-radius: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;     
  margin-bottom: 42rpx;
  &.button-hover {
    opacity: 0.6;
  }
    }
  }

}